import React, { Component } from 'react';
import {
  Text,
  View,
 StyleSheet,
 FlatList,
 Button
} from 'react-native';
import { StackNavigator} from 'react-navigation';

export default class FlatListScreent extends React.Component{
    static navigationOptions={
        title:'FlatList',
    };

    render(){
        const {navigate}=this.props.navigation;

        return(
           <View style={styles.container}>
               <Button
                onPress={()=>navigate('SectionList',{user:'jack'})}
                title='跳转到SectionList'
               />
               <Button
                color='#134213'
                onPress={()=>navigate('Fetch',{user:'jack'})}
                title='跳转到Fetch'
               />
              <FlatList
                data={[
                    {key:'jack'},
                    {key:'Jackson'},
                    {key:'James'},
                    {key:'Joel'},
                    {key:'John'},
                    {key:'Jillian'},
                    {key:'Jimmy'}, 
                    {key:'jack1'},
                    {key:'Jackson1'},
                    {key:'James1'},
                    {key:'Joel1'},
                    {key:'John1'},
                    {key:'Jillian1'},
                    {key:'Jimmy1'},     
                ]}
                renderItem={({item})=>
                  <Text style={styles.item}>{item.key}</Text>
                }
              />
           </View>
        );
    }
}

const styles=StyleSheet.create({
    container:{
      flex:1,
      paddingTop:20
    },
    item:{
        padding:10,
        fontSize:18,
        height:44,
    },
});